<template>
  <el-table
    ref="multipleTable"
    :data="tableData"
    style="width: 100%;"
    stripe
    :size="detailSize"
    max-height="500px"
    class="table-list table-fxied-height"
  >
    <el-table-column type="index" label="序号" width="51" align="center" />
    <el-table-column prop="userName" label="人员名称" min-width="120" align="center" />
    <el-table-column prop="sysUserType" :formatter="formartType" :show-overflow-tooltip="true" label="人员类型" min-width="120" align="center" />
    <el-table-column prop="idCard" :show-overflow-tooltip="true" label="身份证号" min-width="150" align="center" />
    <el-table-column prop="phonenumber" label="手机号码" width="150" align="center" />
  </el-table>
</template>

<script>
// 页面接口
import { InspectorProjectPerson } from '@/api/projectInspection/PatrolList'
import { personTypeListNoPermission } from '@/api/superviseBaseInfo/typeManage/personnelType/index'
export default {
  name: 'PatrolPersonnel',
  props: {
    proId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tableData: [],
      typeOptions: []
    }
  },
  watch: {
    proId: {
      immediate: true,
      handler(value) {
        value && this.getList(value)
      }
    }
  },
  mounted() {
    this.getSupperType()
  },
  methods: {
    // 获取列表
    async getList(proId) {
      const { data } = await InspectorProjectPerson({ proId: proId })
      this.tableData = data
    },
    // 获取人员类型
    async getSupperType() {
      const { data: { rows }} = await personTypeListNoPermission()
      this.typeOptions = rows
    },
    // 回显人员类型
    formartType(row) {
      if (JSON.stringify(row) === '{}') return
      const item = this.typeOptions.find(item => item.typeNum === row.sysUserType)
      return item && item.typeName
    }
  }
}
</script>

<style lang='scss' scoped>
.table-fxied-height {
  max-height: 396px; // 最多10条数据
  overflow-y: scroll;
}
</style>
